<template>
  <div class="search-container">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar left-arrow title="搜索中心" @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="inpuHandler"
      @search="toResult"
    >
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group>
      <van-cell
        v-for="(item, index) in highlightOptions"
        :key="index"
        :title="item"
        icon="search"
        @click="toResultWithQuery(index)"
      >
        <!-- 使用具名插槽 -->
        <template #title>
          <div v-html="item" class="box"></div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->
  </div>
</template>

<script>
// 导入api
import { getSearchSuggestion } from '../../api/search'
export default {
  name: 'search',
  data () {
    return {
      keyword: '', // 搜索关键字
      // 提示关键字 数组
      options: [],
      // 定时器的id
      timeoutId: undefined,
      // 是否可以触发搜索
      canSearch: true
    }
  },
  computed: {
    highlightOptions () {
      // map方法的作用是 基于原始数组 生成新数组
      const opts = this.options.map(v => {
        // 循环数组的每一项 v就是当前项
        // console.log('v:', v)
        return v.replace(
          this.keyword,
          `<span style="color:red">${this.keyword}</span>`
        )
      })
      // console.log('opts:', opts)
      // 返回添加高亮之后的数组
      return opts
    }
  },
  methods: {
    // 点击cell 去搜索结果页
    toResultWithQuery (index) {
      // 获取索引
      console.log('index:', index)
      // 根据索引获取关键字
      console.log(this.options[index])
      this.$router.push({ path: '/result', query: { q: this.options[index] } })
    },
    // 去搜索结果页
    toResult () {
      // 带着数据跳转
      this.$router.push({ path: '/result', query: { q: this.keyword } })
    },
    // 优化版本 - 节流
    // 1. 用户输入内容之后立刻搜索
    // 2. `500ms`内如果再次触发搜索,直接无视
    async inpuHandler () {
      // 非空判断
      if (this.keyword === '') {
        // 没有输入内容 直接清空
        this.options = []
        // 不调用接口
        return
      }
      // 直接触发
      if (this.canSearch === true) {
        this.canSearch = false
        const res = await getSearchSuggestion({ q: this.keyword })
        // 保存
        this.options = res.data.data.options
        console.log('触发啦')
        setTimeout(() => {
          // 重置标记
          // 延迟500ms才可以继续触发
          this.canSearch = true
        }, 500)
      }
    }

    // 优化版本 - 防抖
    // 输入之后延迟500ms在搜索 再次触发,延长倒计时即可
    // inpuHandler () {
    //   // 刷新倒计时 刷新时间
    //   clearTimeout(this.timeoutId)
    //   // 开启倒计时
    //   this.timeoutId = setTimeout(async () => {
    //     // 非空判断
    //     if (this.keyword === '') {
    //       // 没有输入内容 直接清空
    //       this.options = []
    //       // 不调用接口
    //       return
    //     }
    //     const res = await getSearchSuggestion({ q: this.keyword })
    //     // 保存
    //     this.options = res.data.data.options
    //   }, 500)
    // }
    // 基础版本 不考虑任何的性能优化
    // async inpuHandler () {
    //   // 非空判断
    //   if (this.keyword === '') {
    //     // 没有输入内容 直接清空
    //     this.options = []
    //     // 不调用接口
    //     return
    //   }
    //   const res = await getSearchSuggestion({ q: this.keyword })
    //   // 保存
    //   this.options = res.data.data.options
    // }
  }
}
</script>

<style lang="less">
.search-container {
  .van-nav-bar {
    background-color: #3296fa;
    .van-nav-bar__title {
      color: white;
    }
    .van-icon {
      color: white;
    }
  }
  .box {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 280px;
  }
}
</style>
